<!--<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>首页</title>
	<!--<link rel="stylesheet"
        href="<c:url value="/statics/bootstrap-3.3.0/css/bootstrap.css"/>">
    <link rel="stylesheet"
        href="<c:url value="/statics/jquery-ui-1.12.1/jquery-ui.css"/>">
    <link rel="stylesheet"
        href="<c:url value="/statics/jquery-ui-1.12.1/jquery-ui.theme.css"/>">
    <link rel="stylesheet" href="<c:url value="/statics/css/style.css"/>">
    <script src="<c:url value="/statics/jquery-1.12.4/jquery-1.12.4.js"/>"></script>-->

	<link rel="stylesheet"
		  href="../statics/bootstrap-3.3.0/css/bootstrap.css">
	<link rel="stylesheet"
		  href="../statics/jquery-ui-1.12.1/jquery-ui.css">
	<link rel="stylesheet"
		  href="../statics/jquery-ui-1.12.1/jquery-ui.theme.css">
	<link rel="stylesheet" href="../statics/css/style.css">
	<script src="../statics/jquery-1.12.4/jquery-1.12.4.js"></script>
	<script>
		$(function() {
			var width = $("#type-bar").width();
			$(window).scroll(function() {
				if ($(document).scrollTop() >= $("#search-bar").height()) {
					$("#type-bar").css({
						"position" : "fixed",
						"top" : 150 - $("#search-bar").height() + "px",
						"width" : width
					});
				} else {
					$("#type-bar").css({
						"position" : "fixed",
						"top" : 150 - $(document).scrollTop() + "px",
						"width" : width
					});
				}
			})
		})
	</script>
</head>
<body>
<div>
	<!--<jsp:include page="header.html" />-->
</div>
<!--  引入头部	-->
<div id="header"></div>
<script type="text/javascript">
	$('#header').load('header.html');
</script>

<div class="col-md-12" style="height: 80px;" id="search-bar">
	<div class="col-md-3"></div>
	<div class="col-md-6" style="padding-top: 10px">
		<form class="form-horizontal">
			<div class="form-group col-md-12">
				<div class="col-md-10">
					<!--<input id="searchText" name="searchText" type="text"
                        class="form-control" value="${param.searchText}"
                        placeholder="这里可以搜索哦~~">-->
					<input id="searchText" name="searchText" type="text"
						   class="form-control" value=""
						   placeholder="这里可以搜索哦~~">
				</div>

				<button id="searchBtn" onclick="searchAction()" class="btn btn-success; col-md-2">搜索</button>

				<div class="col-md-12">
					<!--<c:if test="${param.searchText != '' && param.searchText != null}">
                        <p></p>
                        <p>为您搜索到“${param.searchText}”相关物品${goodsNum}条记录</p>
                    </c:if>-->
					<p></p>
					<!--						<p>为您搜索到“param.searchText”相关物品goodsNum条记录</p>-->
				</div>
			</div>
		</form>
	</div>
	<div class="col-md-3"></div>
</div>

<div class="container">
	<div class="main-content">
		<div class="col-md-2" style="padding-left: 0px; padding-right: 0px;"
			 id="type-bar">
			<div class="col-md-12" align="center"
				 style="padding-left: 0px; padding-right: 0px;" id="type-button">
				<!--<c:forEach var="firstType" items="${firstTypes}">
                    <div
                        style="height: 50px; width: 100%; background-color: #eaeaea; margin-top: 15px;"
                        class="btn-type" align="center;" id="type${firstType.id}"
                        onclick="typeButton(${firstType.id})">
                        <p>
                        <h4>${firstType.name}</h4>
                        </p>
                    </div>

                    <div class="col-md-12 r" id="${firstType.id}"
                        style="display: none; background-color: #f5f5f5; padding-left: 0px; padding-right: 0px;"
                        align="center">
                        <c:forEach var="secondType" items="${firstType.secondType}">
                            <a class="col-md-12 r-type"
                               href="?secondTypeId=${secondType.id}">
                                <p></p>
                                <p>${secondType.name}</p>
                            </a>
                        </c:forEach>
                    </div>
                </c:forEach>-->

				<div
						style="height: 50px; width: 100%; background-color: #eaeaea; margin-top: 15px;"
						class="btn-type" align="center;" id="type0"
						onclick="typeButton(0)">
					<p>
					<h4>全部商品</h4>
					</p>
				</div>
				<div class="col-md-12 r" id="0"
					 style="display: none; background-color: #f5f5f5; padding-left: 0px; padding-right: 0px;"
					 align="center">
					<a class="col-md-12 r-type"
					   href="?type=">
						<p></p>
						<p>全部商品</p>
					</a>
				</div>
				<!--					生活用品-->
				<div
						style="height: 50px; width: 100%; background-color: #eaeaea; margin-top: 15px;"
						class="btn-type" align="center;" id="type1"
						onclick="typeButton(1)">
					<p>
					<h4>生活用品</h4>
					</p>
				</div>
				<div class="col-md-12 r" id="1"
					 style="display: none; background-color: #f5f5f5; padding-left: 0px; padding-right: 0px;"
					 align="center">
					<a class="col-md-12 r-type"
					   href="?type=1">
						<p></p>
						<p>洗衣液洗衣粉</p>
					</a>
					<a class="col-md-12 r-type"
					   href="?type=2">
						<p></p>
						<p>杯子</p>
					</a>
					<a class="col-md-12 r-type"
					   href="?type=3">
						<p></p>
						<p>沐浴露</p>
					</a>
				</div>

				<!--					衣服-->
				<div
						style="height: 50px; width: 100%; background-color: #eaeaea; margin-top: 15px;"
						class="btn-type" align="center;" id="type2"
						onclick="typeButton(2)">
					<p>
					<h4>衣服</h4>
					</p>
				</div>
				<div class="col-md-12 r" id="2"
					 style="display: none; background-color: #f5f5f5; padding-left: 0px; padding-right: 0px;"
					 align="center">
					<a class="col-md-12 r-type"
					   href="?type=4">
						<p></p>
						<p>上衣</p>
					</a>
					<a class="col-md-12 r-type"
					   href="?type=5">
						<p></p>
						<p>裤子</p>
					</a>
				</div>

				<!--					鞋子-->
				<div
						style="height: 50px; width: 100%; background-color: #eaeaea; margin-top: 15px;"
						class="btn-type" align="center;" id="type3"
						onclick="typeButton(3)">
					<p>
					<h4>鞋子</h4>
					</p>
				</div>
				<div class="col-md-12 r" id="3"
					 style="display: none; background-color: #f5f5f5; padding-left: 0px; padding-right: 0px;"
					 align="center">
					<a class="col-md-12 r-type"
					   href="?type=6">
						<p></p>
						<p>运动鞋</p>
					</a>
					<a class="col-md-12 r-type"
					   href="?type=7">
						<p></p>
						<p>休闲鞋</p>
					</a>
				</div>
				<!--其他-->
				<div
						style="height: 50px; width: 100%; background-color: #eaeaea; margin-top: 15px;"
						class="btn-type" align="center;" id="type4"
						onclick="typeButton(4)">
					<p>
					<h4>其他</h4>
					</p>
				</div>
				<div class="col-md-12 r" id="4"
					 style="display: none; background-color: #f5f5f5; padding-left: 0px; padding-right: 0px;"
					 align="center">
					<a class="col-md-12 r-type"
					   href="?type=8">
						<p></p>
						<p>其他商品</p>
					</a>
				</div>
			</div>
		</div>


		<div class="col-md-10" style="margin-top: 10px; float: right;">
			<!--物品展示框-->
			<div id="goodsBox">

			</div>
			<!--<c:choose>
                <c:when test="${goods.size() == 0}">
                    <div align="center">
                        <img style="width: 500px; height: 350px"
                            src="<c:url value="/statics/image/photos/default/shouqing.png"/>">
                        <h2>抱歉，暂无此类物品！</h2>
                    </div>
                </c:when>
            </c:choose>-->

			<!--<c:forEach var="good" items="${goods}">
                <a target="_blank" href="goods/goodInfo?goodId=${good.id}">
                    <div class="c col-md-3">
                        <div class="a col-md-12" style="max-height: 300px;">
                            <img src="<c:url value="${good.photoUrl}"/>" width="100%">
                            <p style="height: 25px; margin-top: 20px">${good.name}</p>
                            <p style="color: red; text-align: right">
                                <B>价格：${good.prise}￥</B>
                            </p>
                        </div>
                    </div>
                </a>
            </c:forEach>-->





			<!-- 分页栏 -->
			<div id="pagination" class="col-md-12 column" align="right">
				<!--					<ul class="pagination">-->
				<!--<c:choose>
                    <c:when test="${offset >= limit}">
                        <li><a
                            href="?searchText=${param.searchText}&secondTypeId=${param.secondTypeId}&offset=${offset - limit}">上一页</a>
                        </li>
                    </c:when>
                    <c:otherwise>
                        <li class="disabled"><a href="#">上一页</a></li>
                    </c:otherwise>
                </c:choose>-->
				<!--上一页-->
				<!--						<li id="prePage">-->
				<!--							<a href="?searchText=${param.searchText}&secondTypeId=${param.secondTypeId}&offset=${offset - limit}">上一页</a>-->
				<!--						</li>-->

				<!--<c:forEach var="page" begin="1" end="${pages}">
                    <c:choose>
                        <c:when test="${offset == limit * (page - 1)}">
                            <li class="disabled"><a href="#">${page}</a></li>
                        </c:when>
                        <c:otherwise>
                            <li><a
                                href="?searchText=${param.searchText}&secondTypeId=${param.secondTypeId}&offset=${limit * (page - 1)}">${page}</a>
                            </li>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>-->

				<!--						<li><a href="?searchText=${param.searchText}&secondTypeId=${param.secondTypeId}&offset=${limit * (page - 1)}">1</a></li>-->
				<!--						<li><a href="?searchText=${param.searchText}&secondTypeId=${param.secondTypeId}&offset=${limit * (page - 1)}">2</a></li>-->
				<!--						<li><a href="?searchText=${param.searchText}&secondTypeId=${param.secondTypeId}&offset=${limit * (page - 1)}">3</a></li>-->
				<!--						<li><a href="?searchText=${param.searchText}&secondTypeId=${param.secondTypeId}&offset=${limit * (page - 1)}">....</a></li>-->



				<!--<c:choose>
                    <c:when test="${goods.size() >= limit}">
                        <li><a
                            href="?searchText=${param.searchText}&secondTypeId=${param.secondTypeId}&offset=${offset + limit}">下一页</a>
                        </li>
                    </c:when>
                    <c:otherwise>
                        <li class="disabled"><a href="#">下一页</a></li>
                    </c:otherwise>
                </c:choose>-->

				<!--						<li id="nextPage"><a href="?searchText=${param.searchText}&secondTypeId=${param.secondTypeId}&offset=${offset + limit}">下一页</a></li>-->
				<!--					</ul>-->
			</div>
		</div>
	</div>
</div>

<!--<jsp:include page="footer.html" />-->
<!--  引入尾部	-->
<div id="footer"></div>
<script type="text/javascript">
	$('#footer').load('footer.html');
</script>

<script>
	function typeButton(firstTypeId) {
		var firstType ="#" + firstTypeId;
		var firstType1 = "#type" + firstTypeId;
		if (document.getElementById(firstTypeId).style.display === "none") {
			$(".btn-type").slideUp();
			$(firstType1).slideDown();
			$(firstType).slideDown();
		} else {
			$(".btn-type").slideDown();
			$(firstType).slideUp();
		}
	}
</script>
<!--<script src="<c:url value="/statics/jquery-1.12.4/jquery-1.12.4.js"/>"></script>
<script src="<c:url value="/statics/bootstrap-3.3.0/js/bootstrap.js"/>"></script>
<script src="<c:url value="/statics/jquery-ui-1.12.1/jquery-ui.js"/>"></script>
<script
    src="<c:url value="/statics/jquery-ui-1.12.1/datepicker-zh-CN.js"/>"></script>-->

<script src="../statics/jquery-1.12.4/jquery-1.12.4.js"></script>
<script src="../statics/bootstrap-3.3.0/js/bootstrap.js"></script>
<script src="../statics/jquery-ui-1.12.1/jquery-ui.js"></script>
<script
		src="../statics/jquery-ui-1.12.1/datepicker-zh-CN.js"></script>
<script type="text/javascript">
	$(function (){
		searchAction();
	});


	function searchAction(){
		var searchText = $("#searchText").val();
		var type = "";
		var page = "";
		var str = location.search.replace('?','');

		console.log(str);
		if (str == '' || str == null){

		}else if (str.indexOf("&") != -1){
			str = str.split("&");
			for (let i = 0; i < str.length; i++) {
				switch (str[i].split("=")[0]) {
					case "searchText" :
						searchText = str[i].split("=")[1];
						break;
					case "page" :
						page = str[i].split("=")[1];
						break;
					case "type" :
						type = str[i].split("=")[1];
				}
			}

		} else {
			switch (str.split("=")[0]) {
				case "searchText" :
					searchText = str.split("=")[1];
					break;
				case "page" :
					page = str.split("=")[1];
					break;
				case "type" :
					type = str.split("=")[1];
			}
		}

		$.ajax({
			type: "GET",
			url: "/goods/findAll?page="+page+"&searchText="+searchText+"&type="+type,
			contentType: "application/json;charset=utf-8",
			//data : {"page" : page, "searchText" : searchText, "type" : type},
			success : function (data) {
				console.log(page);
				console.log(searchText);
				console.log(type);
				if (data.data.total != 0){
					$("#goodsBox").empty();
					$.each(data.data.records, function (i, obj) {
						$("#goodsBox").append(
								"<a target='_blank' href='/goods/goodInfo.html?goodsId=" + obj['id'] + "'>" +
								"<div class='c col-md-3'>" +
								"<div class='a col-md-12' >" +
								"<div style='width: 100%;height: 15vw;' >" +
								"<img src='https://yilutangping.oss-cn-shenzhen.aliyuncs.com/userProfileImage/" + obj['picture'] + "' width='100%'>" +
								"</div>"+
								"<p style='height: 25px; margin-top: 20px'>" + obj['title'] + "</p>" +
								"<p style='color: red; text-align: right'>" +
								"<B>价格：" + obj['price'] + "</B>" +
								"</p>" +
								"</div>" +
								"</div>" +
								"</a>"
						)
					})
					//位置1  对数据进行分页
					$("#pagination").show();
					pagination(data.data,searchText,type);
				} else {
					$("#goodsBox").empty();
					$("#goodsBox").append(
							"<div align='center'>" +
							"<img style='width: 500px; height: 350px' src='../statics/image/photos/default/shouqing.png'>" +
							"<h2>抱歉，暂无此类物品</h2>" +
							"</div>"
					)
					$("#pagination").hide();
				}
			}
		});
	}

	// 分页栏
	function pagination(result,searchText,type) {
		var pages = parseInt(result.pages);
		var current = parseInt(result.current);
		var prePage = current - 1;
		var nextPage = current + 1;
		var pageLi=""
		var i;
		for (i=1;i<=pages;i++){
			let pageId = "page"+i;
			pageLi+="<li id="+pageId+"><a href='?page="+i+"&searchText="+ searchText + "&type="+ type +"'>"+i+"</a></li>"
		}
		$("#pagination").append(
				"<ul class='pagination'>" +
				"<li id='prePage'>" +
				"<a href='?page="+ prePage +"&searchText="+ searchText+"&type="+type+"'>上一页</a>" +
				"</li>" +
				pageLi+
				"<li id='nextPage'>" +
				"<a href='?page="+ nextPage +"&searchText="+ searchText+"&type="+ type+"'>下一页</a>" +
				"</li>" +
				"</ul>"
		)
		if (current == 1){
			$("#prePage").addClass("disabled");
		}
		if (current == pages){
			$("#nextPage").addClass("disabled");
		}
		if (current == 1){

		}
		var temp = "#page"+current;
		$(temp).css("background", "blue");
	}



</script>
</body>
</html>
